<%--
  Created by IntelliJ IDEA.
  User: caojian
  Date: 2017/3/10
  Time: 下午5:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>选择位置</title>
    <jsp:include page="common/common_css.jsp"/>
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=${ak}"></script>
    <style type="text/css">
        .search {
            position: absolute;
            top: 1em;
            left: auto;
            right: auto;
            text-align: center;
            z-index: 11;
            width: 100%;
        }

        #container {
            height: 100%;
        }
    </style>
</head>
<body>
<div class="search">
    <div id="JS-search" class="ui right action left icon input">
        <i class="search icon"></i>
        <input type="text" placeholder="Search">
        <div class="ui basic floating dropdown button">
            <div class="text">成都</div>
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item">成都</div>
            </div>
        </div>
    </div>
</div>
<div id="container"></div>
<input id="JS-callback" type="hidden" value="${callback}">
<jsp:include page="common/common_js.jsp"/>
<script>
    $(function () {
        var map = new BMap.Map("container");          // 创建地图实例
        map.enableKeyboard();
        var city = $('#JS-search .dropdown.button .text').text();
        var citySearch = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: true}});
        citySearch.search(city);
        $('#JS-search input').keydown(function (e) {
                if (e.keyCode == 13) {
                    var value = $('#JS-search input').val();
                    if (value == '') {
                        alert("请输入内容！");
                        return;
                    }
                    var localSearch = new BMap.LocalSearch(city);
                    localSearch.search(value);
                    localSearch.setSearchCompleteCallback(function (rs) {
                        if (localSearch.getStatus() == BMAP_STATUS_SUCCESS) {
                            map.clearOverlays();
                            var currentNumPois = rs.getCurrentNumPois();
                            for (var j = 0; j < currentNumPois; j++) {
                                var poi = rs.getPoi(j);
                                var marker = new BMap.Marker(poi.point);
                                marker.cj = {'title': poi.title};
                                marker.addEventListener('click', function (target) {
                                    var html = [];
                                    html.push("<div>");
                                    html.push(this.cj.title);
                                    html.push("</div>");
                                    html.push("<div>");
                                    html.push('<a href="');
                                    html.push(ROOT);
                                    html.push($('#JS-callback').val());
                                    html.push("?name=");
                                    html.push(this.cj.title);
                                    html.push("&longitude=");
                                    html.push(this.getPosition().lng);
                                    html.push("&latitude=");
                                    html.push(this.getPosition().lat);
                                    html.push('">就选它了</a>');
                                    html.push("</div>");
                                    this.openInfoWindow(new BMap.InfoWindow(html.join("")));
                                });
                                map.addOverlay(marker);
                            }
                            if (currentNumPois > 0) {
                                map.centerAndZoom(rs.getPoi(0).point, 19);
                            }
                        }
                    });
                }
            }
        );
    });
</script>
</body>
</html>
